<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的列重置</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<!-- row代表行    行中 lg最小宽度1170   md 970  sm 750px  xs 最小的auto
       row  中的div在相同类下  lg 或者 md...   每个宽度下   所有的div  相加必须是  12 的倍数

       当宽度大于1170 时 使用 lg划分   970<x<1170时 以md划分  ......
       container 不设置的时候宽度默认最大为1170px,随浏览器变化   设置时一定要用百分比  -->

<!--会把相连的12列相加大于容器宽度的话 每个都会占一列-->
<!--经过试验测试发现  width不能设置为具体值  因为浏览器在缩小时  width是动态改变的 要不然div也会溢出  失去了栅格划分的效果
  那么要扩大container容器的默认宽度怎么办???

  container外面套一个div试试  还是会溢出隐藏

只能设置百分比   这样不会失去栅格的功能-->



<!--   重点   6+6+8+4   为12 的倍数
              3+3+3+3  为12 的倍数      不是倍数的话  会出错-->


<div class="container"  style="margin-left: 200px" >
    <div class="row" >
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;">
                  <p>111111111111111111111111111111111
                  11111111111111111111111111111111111
                   1</p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="background-color: red;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>


        <!--lg的最小宽度是750  当容器宽度小于750,每个都会占一列-->
        <div class="col-xs-8 col-sm-3"
             style="background-color: blue;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>
        <div class="col-xs-4 col-sm-3"
             style="background-color: greenyellow;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>
    </div>
</div>


<div>1</div>


<div class="container"  style="width: 90%">
    <div class="row" >
        <div class="col-xs-6 col-sm-3"
             style="background-color: #dedef8;overflow-x: hidden">     <!--横向溢出隐藏-->
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>
        <div class="col-xs-6 col-sm-3"
             style="box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>


        <!--lg的最小宽度是750  当容器宽度小于750,每个都会占一列-->
        <div class="col-xs-8 col-sm-3"
             style="background-color: blue;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>
        <div class="col-xs-4 col-sm-3"
             style="background-color: greenyellow;box-shadow:
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>111111111111111111111111111111111
                11111111111111111111111111111111111
                1</p>
        </div>
    </div>
</div>










<div class="container">
    <!--lg的最小宽度是1170  当容器宽度小于1170,每个都会占一列-->
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-8">col-lg-8</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-3">col-md-3</div>
    </div>
</div>




<div class="container">

    <!--md的最小宽度是970  当容器宽度小于970,每个都会占一列-->
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>

</div>



<div class="container">
    <div class="row">
        <div class="col-md-4">1111</div>
        <div class="col-md-4 col-md-offset-2">111</div>
        <div class="col-md-2">333</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">列偏移</div>
        <div class="col-md-2">col-md-2</div>
        <div class="col-md-2">col-md-2</div>
    </div>
</div>

</body>
</html>